/**
 * 空间别名设置
 */

import React from 'react';
import { Button, Message } from '@teamix/ui';
import { navigate } from 'utils/router';
import utils from 'utils';
import './index.scss';
import exceed from 'utils/apimap';
import intl from '../../locale';

const { id, organization_id } = window.FORCE.organization;

export default class AliasName extends React.Component {
  static propTypes = {};

  constructor(props) {
    super(props);
    this.state = {
      aliasVisibe: false,
      pathExist: utils.getCachedData(organization_id) || '0',
    };
  }

  componentDidMount() {
    this.getOrgAliasName();
  }

  // 查询企业标识名设置
  getOrgAliasName() {
    exceed
      .forceFetch({
        api: 'organization.alias.name.get',
        params: {
          orgId: organization_id,
        },
      })
      .then((result) => {
        this.setState({
          aliasVisibe: result.path === result.organization_id,
        });
      });
  }

  checkOrgAliasName = (value) => {
    exceed
      .fetch({
        api: 'organization.verify',
        data: value,
      })
      .then(() => {
        this.setOrgAliasName(value);
      })
      .fail((err) => {
        const errCause = JSON.parse(err.responseText).message;
        console.log(errCause);
      });
  };

  setOrgAliasName = (value) => {
    exceed
      .forceFetch({
        api: 'organization.alias.name.update',
        params: {
          id,
        },

        data: value,
      })
      .then(() => {
        Message.success({
          title: intl.get({
            id: 'code-assets.components.aliasName.TheIdentifierIsSet',
            defaultMessage: '标识名设置成功',
          }),
        });

        this.getOrgAliasName();
      });
  };

  onCancleClick = () => {
    utils.setCachedData(organization_id, '1');
    this.setState({
      aliasVisibe: false,
    });
  };

  handleOk = () => {
    navigate('/settings/customize');
  };

  render() {
    const { aliasVisibe, pathExist } = this.state;

    return (
      <React.Fragment>
        {pathExist !== '1' && aliasVisibe ? (
          <div className="org-alias-name">
            <div className="org-alias-image" />
            <div className="org-alias-content">
              {intl.get({
                id: 'code-assets.components.aliasName.TheEnterpriseIdentificationNameIs',
                defaultMessage: '企业标识名未设置',
              })}
            </div>
            <div className="org-alias-description">
              <div className="org-alias-description-item">
                {intl.get({
                  id: 'code-assets.components.aliasName.EasyAccessToTheCode',
                  defaultMessage: '• 设置后可便捷访问代码库',
                })}
              </div>
              <div className="org-alias-description-item">
                {intl.get({
                  id: 'code-assets.components.aliasName.EachEnterpriseIdCorrespondsTo',
                  defaultMessage: '• 每个企业 ID 对应唯一标识名',
                })}
              </div>
              <div className="org-alias-description-item">
                {intl.get({
                  id: 'code-assets.components.aliasName.CannotBeChangedAfterSetting',
                  defaultMessage: '• 设定后不可更改',
                })}
              </div>
            </div>
            <div className="org-alias-btns">
              <Button type="primary" style={{ width: '100%' }} onClick={this.handleOk}>
                {intl.get({
                  id: 'code-assets.components.aliasName.GoToSettings',
                  defaultMessage: '前往设置',
                })}
              </Button>
            </div>
            <div className="org-alias-btns-cancle">
              <Button type="normal" text onClick={this.onCancleClick}>
                {intl.get({
                  id: 'code-assets.components.aliasName.NotSet',
                  defaultMessage: '暂不设置',
                })}
              </Button>
            </div>
          </div>
        ) : null}
      </React.Fragment>
    );
  }
}
